<script setup lang="ts">
	import { ref, onBeforeMount, watch } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import Delete from "@iconify-icons/ep/delete";
	import type { CascaderProps } from 'element-plus'
	import { useColumns } from "./utils/columns";
	import { closeAllDialog } from "@/components/ReDialog";
	import {
		getWarehouseListApi,
		getWarehouseAreaListApi,
		getWarehouseLocationListApi
	} from "@/api/warehouseApi";
	import {
		getWarehouseProductListApi
	} from "@/api/materialApi";
	
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			// title: "新增",
			// checkNo: "",
			// purchaseOrderId: 0,
			// checkType: "",
			// productList: null,
			// materialList: null,
			// materialOptions: null,
			// totalNum: 0
		})
	});
	
	const { vehicleColumns, productList, vehicleOnDel } = useColumns(props.formInline);

	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);
	watch(
	  () => productList.value,
	  newValue => {
	    newFormInline.value.productList = newValue;
		newFormInline.value.totalNum = 0
		for (let item of newFormInline.value.productList) {
			newFormInline.value.totalNum += item.realNumber - item.number
		}
	  },
	  { deep: true, immediate: true }
	);
	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
	const statusOptions = [
		{
			id: 1,
			name: '盘库中'
		},
		{
			id: 2,
			name: '已完成'
		}
	]
	const checkTypeOptions = [
		{
			id: 1,
			name: '物料盘点'
		},
		{
			id: 2,
			name: '仓库盘点'
		}
	]
	const warehouseProps: CascaderProps = {
		value: 'id',
		label: 'name',
		emitPath: true,
		lazy: true,
		checkStrictly: true,
		lazyLoad(node, resolve) {
		    const { level } = node
			if(level === 0) {
				getWarehouseListApi({ page: 1, perPage: 999 }).then((res)=> {
					if(res?.code === 200) {
						for (let item of res.result.list) {
							item.id = item.warehouseId
							item.leaf =  false
						}
						resolve(res.result.list)
					}
				})
			} else if(level === 1) {
				getWarehouseAreaListApi({ page: 1, perPage: 999, warehouseId: node.value }).then((res)=> {
					if(res?.code === 200) {
						for (let item of res.result.list) {
							item.id = item.warehouseAreaId,
							item.leaf =  false
						}
						resolve(res.result.list)
					}
				})
			} else if(level === 2) {
				getWarehouseLocationListApi({ page: 1, perPage: 999, warehouseAreaId: node.value }).then((res)=> {
					if(res?.code === 200) {
						for (let item of res.result.list) {
							item.id = item.warehouseLocationId
							item.leaf =  true
						}
						resolve(res.result.list)
					}
				})
			}
		  },
	}

	const checkTypeChange = (e) => {
		newFormInline.value.materialId = null
		productList.value = []
	}
	const warehouseChange = (e) => {
		if(e) {
			newFormInline.value.warehouseId = e[0]
			if(e.length === 2) {
				newFormInline.value.warehouseAreaId = e[1]
				newFormInline.value.warehouseLocationId = null
			}
			if(e.length === 3) {
				newFormInline.value.warehouseAreaId = e[1]
				newFormInline.value.warehouseLocationId = e[2]
			}
			if(e.length === 1) {
				newFormInline.value.warehouseAreaId = null
				newFormInline.value.warehouseLocationId = null
			}
			if(newFormInline.value.materialId) {
				materialChange(newFormInline.value.materialId)
			}
			
			productList.value = []
		}
	}
	const materialChange = async(e) => {
		let params = {
			page:1,
			perPage: 9999,
			materialId: e,
			warehouseId: null,
			warehouseAreaId: null,
			warehouseLocationId: null,
		}
		if(newFormInline.value.checkType === 2) {
			params.warehouseId = newFormInline.value.warehouseId
			params.warehouseAreaId = newFormInline.value.warehouseAreaId
			params.warehouseLocationId = newFormInline.value.warehouseLocationId
		}
		const res = await getWarehouseProductListApi(params)
		if(res?.code ===200) {
			productList.value = newFormInline.value.productList = res.result.list;
			useColumns(props.formInline)
		}
	}
	// 关闭弹窗
	// const cancelDialog = () => {
	// 	closeAllDialog()
	// }
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto" style="margin-bottom: 20px;">
		<el-row :gutter="30">
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="盘点单号" prop="checkNo">
					<el-input v-model="newFormInline.checkNo" clearable placeholder="请输入盘点单号" :maxlength="30"
						disabled />
				</el-form-item>
			</re-col>
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="盈亏数" required>
					<el-input
					  v-model="newFormInline.totalNum"
					  clearable
					  placeholder="请输入盈亏数"
					  disabled
					/>
				</el-form-item>
			</re-col>
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="盘点类型" prop="checkType">
					<el-select v-model="newFormInline.checkType" @change="checkTypeChange" :disabled="newFormInline.title==='新增'?false:true" placeholder="请选择盘点状态">
						<el-option
						  v-for="item in checkTypeOptions"
						  :key="item.id"
						  :label="item.name"
						  :value="item.id"
						>
						
						</el-option>
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="盘点状态" prop="status">
					<el-select v-model="newFormInline.status" placeholder="请选择盘点状态">
						<el-option
						  v-for="item in statusOptions"
						  :key="item.id"
						  :label="item.name"
						  :value="item.id"
						>
						
						</el-option>
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.checkType === 2">
				<el-form-item label="盘点仓库" prop="warehouseArr">
					<el-cascader v-model="newFormInline.warehouseArr" :props="warehouseProps" class="w-full" @change="warehouseChange"></el-cascader>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="盘点物料" prop="materialId">
					<el-select v-model="newFormInline.materialId" filterable clearable placeholder="请选择物料" @change="materialChange">
						<el-option
						  v-for="item in newFormInline.materialOptions"
						  :key="item.materialId"
						  :label="item.name"
						  :value="item.materialId"
						>
						<span style="float: left">{{ item.name }} ({{item.unit.name}})</span>
						<span style="float: right;color: var(--el-text-color-secondary);">{{ item.unit.code }}</span>
						</el-option>
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="24" :xs="24" :sm="24">
				<pure-table
				  align-whole="center"
				  :header-cell-style="{
				    background: 'var(--el-fill-color-light)',
				    color: 'var(--el-text-color-primary)'
				  }"
				  :data="productList"
				  :columns="vehicleColumns"
				>
				  <template #empty>
					<el-empty description="暂无数据" />
				  </template>
				  <template #realNumber="{ row }">
					  <el-input-number type="number" :precision="0" :min="0" v-model="row.realNumber"  controls-position="right" placeholder="请输入实际库存" class="!w-full"/>
				  </template>
				  <template #operation="{ row, $index }">
				    <el-button
				      class="reset-margin"
				      link
				      type="primary"
				      :icon="useRenderIcon(Delete)"
				      @click="vehicleOnDel($index)"
				    />
				  </template>
				</pure-table>
			</re-col>
		</el-row>
		<!-- <div style="text-align: right;margin-top: 20px;">
			<el-button @click="cancelDialog">取消</el-button>
			<el-button type="primary" @click="saveDialog(1)">暂存</el-button>
			<el-button type="success" @click="saveDialog(2)">盘点结束</el-button>
		</div> -->
	</el-form>
</template>
<style scoped></style>